import React, {Component} from 'react';
import Proptypes from 'prop-types';
import {connect} from 'react-redux';
import {Button, WhiteSpace, List} from 'antd-mobile';

import avatars from "../assets/js/avatar";
import './../assets/css/my.less';
import {doLogout} from './../redux/actions';


class My extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    static propTypes = {
        user: Proptypes.object.isRequired,
        doLogout: Proptypes.func.isRequired
    }
   //methods
    handleClick = () => {
        let {doLogout, history} = this.props;
        doLogout();

        history.replace('/login')
    }

    render() {
        let {user:userData, history} = this.props;
        return (
            <div className="my-container">
                <nav>
                    <div className="avatar">
                        <img src={avatars[`avatar_${userData.avatar}`]} alt=""/>
                        <p className="nickname"><em>{userData.nickname}</em></p>
                        {userData.type==='1'?<p>{userData.company} {userData.bossJob}</p>:null}
                    </div>
                </nav>
                <List>
                    <List.Item arrow="horizontal" onClick={() => {}}>
                        个人信息
                    </List.Item>
                    <List.Item arrow="horizontal" onClick={() => {}}>
                        密码安全
                    </List.Item>
                    {
                        userData.type==='1'?<List.Item arrow="horizontal" onClick={() => {history.push('/pushjob')}}>
                            发布职位</List.Item>:null
                    }

                </List>
                <WhiteSpace size="lg"/>
                <Button type="warning" onClick={this.handleClick}>退出登录</Button>
            </div>
        )
    }
}

export default connect(
    (state)=>({
        user:state.user
    }),
    {doLogout}
)(My)